<template>
    <div class="my-card">
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="我的银行卡"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >
            <div
                class="card-empty-tips"
                v-if="cardList.length == 0"
            >{{emptyTips}}</div>

            <div
                class="bank-card-item"
                v-for="(item,index) of cardList"
                :key="index"
            >
                <div
                    class="bank-card-main"
                    @touchstart="touchStart(index)"
                    @touchend="touchEnd(index)"
                    :class="{move:moveItem==index}"
                >
                    <img
                        class="bank-card-icon"
                        src="@/assets/images/card/bank-card-icon.png"
                    />
                    <div class="bank-card-info">
                        <div class="bank-card-name">{{item.bank_name}} {{item.bank_branch}}</div>
                        <div class="bank-card-num">{{item.bank_card}}</div>
                    </div>
                </div>
                <div
                    class="delete-box"
                    @click="deleteItem(item.id,index)"
                >移除</div>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <div
            class="add-card-btn"
            @click="addCard"
        >添加银行卡</div>

        <!-- 绑定手机组件 -->
        <bind-phone
            :bindPhone="bindPhone"
            @closeBindPhone="closeBindPhone"
        ></bind-phone>
        <!-- 绑定手机组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import BindPhone from '@/components/BindPhone'
export default {
    name: 'MyCard',
    components: {
        CommonHeader,
        CommonScroll,
        BindPhone
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '1.33rem'
            },
            cardList: [],
            emptyTips: '正在全力加载中...',
            clientNum: {},
            moveItem: null,
            userInfo: '',
            bindPhone: false
        }
    },
    mounted() {
        this.getCardList()
        this.getUserInfo()
    },
    methods: {
        getUserInfo() {
            this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        },
        getCardList() {
            this.axios.post('/api/user/bank/list.json').then(res => {
                const data = res.data
                if (data.status == 1) {
                    if (data.data.list.length == 0) {
                        this.emptyTips = '暂无数据'
                    }
                    this.cardList = data.data.list
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        addCard() {
            if (
                this.userInfo.mobile_phone == null ||
                this.userInfo.mobile_phone == ''
            ) {
                this.bindPhone = true
                return
            }
            this.$router.push('/addCard')
        },
        touchStart(index) {
            let touches = event.changedTouches[0]
            //记录鼠标滚动的位置
            this.clientNum.x1 = touches.pageX
        },
        touchEnd(index) {
            let touches = event.changedTouches[0]
            //记录鼠标滚动的结束位置
            this.clientNum.x2 = touches.pageX
            if (
                this.clientNum.x2 < this.clientNum.x1 &&
                Math.abs(this.clientNum.x1) - Math.abs(this.clientNum.x2) > 60
            ) {
                event.preventDefault()
                this.moveItem = index
            } else if (
                this.clientNum.x2 > this.clientNum.x1 &&
                Math.abs(this.clientNum.x2) - Math.abs(this.clientNum.x1) > 10
            ) {
                event.preventDefault()
                this.moveItem = null
            }
        },
        deleteItem(id, index) {
            let postData = this.qs.stringify({
                id: id
            })
            this.axios.post('/api/user/bank/del.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    const that = this
                    this.commonDialog.alert(
                        '提示',
                        '银行卡移除成功！',
                        function() {
                            that.moveItem = null
                            setTimeout(() => {
                                that.cardList.splice(index, 1)
                                if (that.cardList.length == 0) {
                                    that.emptyTips = '暂无绑定银行卡'
                                }
                            }, 300)
                        }
                    )
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        closeBindPhone() {
            this.bindPhone = false
        }
    }
}
</script>

<style lang="stylus" scoped>
.card-empty-tips
    height 2rem
    line-height 2rem
    text-align center
    font-size 0.33rem
    color #999
.bank-card-item
    position relative
    width 100%
    height 1.84rem
    border-bottom 1px solid #e5e5e5
    .bank-card-main
        position absolute
        top 0
        right 0
        left 0
        bottom 0
        display flex
        align-items center
        height 1.84rem
        padding 0 0.37rem
        background #fff
        transition all 0.3s
        z-index 2
        .bank-card-icon
            width 1.09rem
            height 1.09rem
        .bank-card-info
            flex 1
            margin-left 0.4rem
            pointer-events none
            .bank-card-name
                font-size 0.37rem
                color #333
            .bank-card-num
                font-size 0.32rem
                color #999
                margin-top 0.2rem
    .move
        transform translateX(-1.57rem)
    .delete-box
        position absolute
        top 0
        right 0
        bottom 0
        width 1.57rem
        height 1.84rem
        line-height 1.84rem
        text-align center
        background #d7463c
        font-size 0.38rem
        color #fff
.add-card-btn
    position absolute
    bottom 0
    left 0
    right 0
    height 1.33rem
    line-height 1.33rem
    text-align center
    background #d7463c
    font-size 0.37rem
    color #fff
</style>
